<template>
    <div>
        <el-divider content-position='left'>
            <el-button type='primary' @click='toDetail'>添加商品</el-button>
        </el-divider>
        <el-table
            :data="tableData"
            stripe
            border
            :header-cell-style="TABLE_HEADER_CELL_STYLE">
            <el-table-column prop='id' label='编号' width="80"></el-table-column>
            <el-table-column prop='title' label='商品名称'></el-table-column>
            <el-table-column prop='title' label='主图' width="80">
                <template v-slot='scope'>
                    <el-image 
                        v-if="scope.row.img_url"
                        style="width: 50px; height: 50px"
                        :src="`${IMG_HOST}${scope.row.img_url}`"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop='type_name' label='商品分类'></el-table-column>
            <el-table-column prop='collect_number' label='收藏' width="80"></el-table-column>
            <el-table-column prop='total_sales_number' label='销量' width="80"></el-table-column>
            <el-table-column label='状态'>
                <template v-slot='scope'>
                    <el-switch v-model='scope.row.status' size='mini' active-text="上架中" inactive-text="已下架"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label='操作'>
                <template v-slot='scope'>
                    <el-button type='text' @click='toDetail(scope.row)'>详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <o-pagination :total='total' @current-change='currentChange'></o-pagination>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                tableData : [{id:1}],
                total : 0,
                queryForm : {
                    page : 1,
                    limit : 10,
                    type_id : null,//分类
                    search_type : 'title',
                    keyword : null,//搜索关键词
                },
                
            }
        },
        created () {
            this.getTableData();
        },
        methods : {
             getTableData () {
                this.__api.commodity.productList(this.queryForm).then(res => {
                    this.total = res.total;
                    this.tableData = res.data;
                })
            },
            //删除
            deleteHandle (row) {
                this.__api.contentApi.pageDelete({
                    id : row.id
                }).then(_ => {
                    toast('操作成功');
                    this.getTableData();
                })
            },
            //更新
            updateHandle (row) {
                this.$nextTick(_ => {
                    this.__api.contentApi.pageUpdate(row).then(_ => {
                        toast('操作成功')
                    })
                })
            },
            //创建确认
            createConfirm () {
                if (!this.createForm.title) {
                    toast('请填写页面名称', 'error');
                    return;
                }
                this.__api.contentApi.pageCreate(this.createForm).then(_ => {
                    toast('操作成功');
                    this.$refs.popover.doClose();
                    this.getTableData();
                    this.resetPopover();
                })
            },
            currentChange (page) {
                this.queryForm.page = page;
                this.getTableData();
            },
            toDetail (row) {
                //获取所有的规格列表，作为前置数
                this.__api.commodity.specsList({
                    page : 1,
                    limit : 99999
                }).then(res => {
                    this.$store.commit('setAttrTypeOptions', res.data);
                    //重置相关数据
                    
                    this.$router.push(`/commodity/detail/${row.id || ''}`)
                })
                
            },
        }
    }
</script>

<style>

</style>